---
title: Контент сообщества
description: Откройте для себя подготовленные сообществом руководства, статьи и видео, которые помогут вам учиться и строить с помощью Starlight!
---

:::tip[Добавьте собственную работу!]
Вы создали какой-то материал о Starlight?
Откройте PR, добавляющий вашу ссылку на эту страницу!
:::

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

## Статьи и обзоры

Вот подборка постов и статей, в которых вы узнаете больше о Starlight и опыте других людей:

<CardGrid>
	<LinkCard
		href="https://devm.io/open-source/starlight-astro"
		title="Генерация статических сайтов с помощью Starlight"
		description="«При разработке компонентов ни одна идея не является слишком большой или слишком маленькой» — интервью с Крисом Свитинбанком, руководителем Starlight"
	/>
	<LinkCard
		href="https://frontendatscale.com/blog/hybrid-frontend-architecture/"
		title="Гибридная архитектура фронтенда с Astro и Starlight"
		description="Макси Феррейра и Бен Холмс создают сайт документации с помощью Starlight, TinaCMS и интерактивной площадки API Playground с аутентификацией."
	/>
	<LinkCard
		href="https://www.olets.dev/posts/comparing-docs-site-builders-vuepress-vs-starlight/"
		title="Сравнение конструкторов сайтов документаций: VuePress против Starlight"
		description="Как соотносятся эти две системы?"
	/>
	<LinkCard
		href="https://astro.build/case-studies/wp-engine/"
		title="Кейс: Снижение затрат на разработку"
		description="Как WP Engine снизил затраты на разработку более чем на 50% с помощью Starlight от Astro."
	/>
	<LinkCard
		href="https://maciekpalmowski.dev/blog/building-a-documentation-site-using-astro-starlight/"
		title="Создание сайта документации с использованием Astro Starlight"
		description="Мачек Пальмовски описывает, как Patchstack мигрировал свою документацию на Starlight."
	/>
	<LinkCard
		href="https://blog.cloudflare.com/open-source-all-the-way-down-upgrading-our-developer-documentation/"
		title="Открытый код на каждом уровне"
		description="Как Cloudflare использовал Starlight для обновления своей документации для разработчиков."
	/>
	<LinkCard
		href="https://starlight-changelog.netlify.app/"
		title="Журнал изменений Starlight"
		description="Просмотр всех релизов пакета @astrojs/starlight на одной удобной странице."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/contributing-to-starlight"
		title="Вклад в Starlight"
		description="Мой личный опыт и рекомендации по внесению вклада в open-source проекты, такие как Starlight."
	/>
</CardGrid>

## Рецепты и руководства

Рецепты — это, как правило, короткие, целенаправленные руководства, которые помогают читателю выполнить конкретную задачу на рабочем примере. Это отличный способ добавить новые функции или поведение в проект Starlight, следуя пошаговым инструкциям! Другие руководства могут объяснять концепции, связанные с той или иной областью контента, например, использование изображений или работа с MDX.

Изучите контент, созданный пользователями Starlight:

<CardGrid>
	<LinkCard
		href="https://www.webpro.nl/scraps/versioned-docs-with-starlight-and-vercel"
		title="Версионированная документация с помощью Starlight и Vercel"
		description="Руководство по внедрению отдельных версий документации для каждой основной версии проекта."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-heading-links"
		title="Добавление ссылок на рубрики Starlight"
		description="Руководство по использованию плагина rehype для обмена ссылками на определенные разделы вашей документации."
	/>
	<LinkCard
		href="https://blog.otterlord.dev/posts/starlight-sponsors/"
		title="Добавление спонсоров на сайт Starlight"
		description="Руководство по внедрению пользовательского компонента спонсора в боковую панель документации."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-og-images"
		title="Добавление изображений Open Graph к Starlight"
		description="Руководство по созданию социальных изображений и соответствующих метатегов для ваших страниц."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-third-party-icon-sets"
		title="Использование сторонних наборов иконок в Starlight"
		description="Руководство по использованию unplugin-icons для расширения выбора доступных иконок для Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-custom-html-head"
		title="Редактирование HTML-заголовка страниц Starlight"
		description="Узнайте, как добавлять дополнительные данные в head страницы: веб-аналитику, шрифты и скрипты."
	/>
	<LinkCard
		href="https://dev.to/mrrobot/publishing-documentation-with-astro-starlight-691"
		title="Публикация документации с помощью Astro Starlight"
		description="Начало работы с документацией в Starlight."
	/>
	<LinkCard
		href="https://events-3bg.pages.dev/jotter/starlight/guide/"
		title="Включение View Transitions"
		description="Добейтесь SPA-подобного вида и ощущения с помощью поддержки переходов представлений."
	/>
	<LinkCard
		href="https://jamcomments.com/posts/structured-data-with-starlight"
		title="Добавление структурированных данных на страницы Starlight"
		description="Узнайте, как создавать динамические структурированные данные JSON-LD для страниц документации."
	/>
	<LinkCard
		href="https://starlight-examples.netlify.app/"
		title="Примеры Starlight"
		description="Коллекция вставок StackBlitz, демонстрирующих практические способы работы с сайтами документации Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notebooks/starlight-plugins-by-example"
		title="Плагины Starlight на примерах"
		description="Коллекция заметок и примеров по плагинам Starlight и распространённым шаблонам для их создания."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-progress-indicator/"
		title="Добавление индикатора прогресса чтения"
		description="Узнайте, как добавить горизонтальную полосу прогресса чтения на ваш сайт Starlight."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-sidebar-whitespace/"
		title="Применяем свои стили к боковой панели Starlight"
		description="Используем CSS, чтобы настроить шрифты, цвета и другие элементы боковой панели Starlight."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-dropdown-and-list-together/"
		title="Выпадающее меню тем на мобильных, обычный список — на десктопе"
		description="Объединяем два плагина, чтобы на мобильных устройствах было выпадающее меню, а на десктопе — обычный список."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-autogenerate-whole-sidebar/"
		title="Обработка боковой панели Starlight через мидлвар"
		description="Используем мидлвар маршрутов для управления порядком и подписями групп в боковой панели по аналогии с Nuxt Content."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-custom-social-links"
		title="Добавляем социальные ссылки с собственными иконками в Starlight"
		description="Узнайте, как добавить в шапку сайта Starlight социальные ссылки с собственными иконками."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-paste-images-with-visual-studio-code"
		title="Вставляем изображения в страницы Starlight прямо из Visual Studio Code"
		description="Ускоряем работу с документацией Starlight: вставляем изображения прямо из Visual Studio Code."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-add-diagrams-using-d2"
		title="Добавляем диаграммы в документацию Starlight с помощью D2"
		description="Узнайте, как добавлять диаграммы в документацию Starlight с помощью языка D2."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-og-images-cloudinary-astro-sdk"
		title="Генерируем Open Graph-изображения для Starlight через Cloudinary Astro SDK"
		description="Узнайте, как использовать Cloudinary Astro SDK для генерации изображений Open Graph для сайта на Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-list-recent-github-releases"
		title="Выводим последние GitHub-релизы в Starlight через Astro Content Layer API"
		description="Узнайте, как использовать Astro Content Layer APIВ для получения списка последних GitHub-релизов в проекте на Starlight."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-sitewide-banner"
		title="Добавляем общий баннер на весь сайт Starlight"
		description="Как сделать общий для всего сайта баннер, используя встроенную функцию Starlight для баннеров на отдельных страницах."
	/>
</CardGrid>

## Видеоконтент

Откройте для себя видео и каналы с контентом Starlight, включая прямые трансляции и образовательный контент.

import YouTubeGrid from '~/components/youtube-grid.astro';

### Официальные видео

<YouTubeGrid
	videos={[
		{
			href: 'https://www.youtube.com/watch?v=5u0Ds7wzUeI',
			title: 'Starlight от Astro',
			description: 'Смотрите официальное видео запуска Starlight',
		},
		{
			href: 'https://www.youtube.com/watch?v=j8K-ESJF814',
			title: 'Starlight один год!',
			description:
				'Sarah рассказывает о созданной сообществом Astro теме для документации',
		},
	]}
/>

### Видео и стримы от сообщества

<YouTubeGrid
	videos={[
		{
			href: 'https://www.youtube.com/shorts/zjOWezSzd18',
			title: '🌟 Запуск сайта на Starlight менее чем за минуту',
			description:
				'Смотрите, как Ben запускает новый сайт на Starlight меньше чем за минуту!',
		},
		{
			href: 'https://www.youtube.com/watch?v=sF6UcV3moZg',
			title: 'Создание документов с помощью Starlight и Astro',
			description:
				'Посмотрите, как Крис и Алекс погружаются в Starlight с помощью CodingCat.dev',
		},
		{
			href: 'https://www.youtube.com/watch?v=sWkkHbwDeQc',
			title: 'Astro Starlight',
			description: 'Знакомство со Starlight за одну минуту',
		},
		{
			href: 'https://www.youtube.com/watch?v=-Ki-1E5gNCk',
			title:
				'Шаблон документации Astro Starlight (создаём документацию для пользовательского приложения!)',
			description: 'Запустите новый сайт Starlight примерно за 5 минут',
		},
		{
			href: 'https://www.youtube.com/watch?v=12o7WxjAxjM',
			title:
				'Включите документацию Starlight в проект Next.js с помощью прокси',
			description:
				'Установите Starlight в подкаталоге проекта сайта на Next.js',
		},
		{
			href: 'https://www.youtube.com/watch?v=5pq80drDrNs',
			title:
				'Я воссоздал документы Shadcn за 30 минут с помощью этого удивительного инструмента',
			description:
				'В этом видео я рассказываю о том, что делает Starlight таким крутым и почему вы можете попробовать его в своем следующем проекте.',
		},
		{
			href: 'https://www.youtube.com/watch?v=Q1E4Gkt63ko',
			title: 'Astro Starlight и взрыв эмоций с Крисом Свитинбанком',
			description:
				'В этой статье Крис, создатель Starlight, рассказывает о том, как настроить этот фреймворк для нового сайта, посвящённого эмодзи. 🌟 🎇',
		},
	]}
/>
